<template>
  <div class="admin-dashboard">
    <!-- 总览统计 -->
    <el-row :gutter="20" class="overview">
      <el-col :span="8">
        <el-card class="overview-box" shadow="hover">
          <div class="overview-title">用户总数</div>
          <div class="overview-number">{{ stats.totalUsers }}</div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card class="overview-box" shadow="hover">
          <div class="overview-title">冻结用户数</div>
          <div class="overview-number">{{ stats.frozenUsers }}</div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card class="overview-box" shadow="hover">
          <div class="overview-title">轮播图总数</div>
          <div class="overview-number">{{ stats.totalCarousel }}</div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      stats: {
        totalUsers: 0,
        totalCarousel: 0,
        frozenUsers: 0,
      },
    };
  },
  created() {
    // 创建时先获取一次用户列表
    // 请求接口获取用户信息
    this.$http.get('/users/backend/list')
      .then(({ data: { code, list } }) => {
        // 获取失败
        if (code != 1) return alert('获取用户信息失败');
        // 获取成功
        this.stats.totalUsers = list.length;
        this.stats.frozenUsers = list.filter(e => !e.flag).length;
      })
    //初始化获取轮播图列表
    this.$http.get('/carousel/list')
      .then(({ data: { code, list } }) => {
        if (code != 1) return console.log('获取轮播图列表失败');
        this.stats.totalCarousel = list.length;
      })
  },
};
</script>

<style scoped>
.admin-dashboard {
  padding: 20px;
  background-color: #f5f5f5;
  min-height: 100vh;
}

.overview {
  margin-bottom: 20px;
}

.overview-box {
  text-align: center;
  padding: 20px;
  background-color: #fff;
}

.overview-title {
  font-size: 18px;
  color: #333;
  margin-bottom: 10px;
}

.overview-number {
  font-size: 30px;
  font-weight: bold;
  color: #000;
}
</style>
